<template>
  <div>

    <h3>権限情報編集</h3>

    <div id="container">

      <div class="placeholder"></div>
      <i class="dot">*</i>
      <i>は入力必須です。</i>

      <el-form :label-position="labelPosition" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px"
        class="demo-ruleForm bot">
        <el-form-item label="コード" prop="authorityCode" class="word">
          <el-input v-model="ruleForm.authorityCode" class="in"></el-input>
        </el-form-item>
        <el-form-item label="権限名称" prop="authorityName" class="word">
          <el-input v-model="ruleForm.authorityName" class="in"></el-input>
        </el-form-item>

        <el-form-item label="権限機能" prop="authorityFeature" class="word">
          <el-input type="textarea" v-model="ruleForm.authorityFeature" class="text"></el-input>
        </el-form-item>

      </el-form>

    </div>

    <el-row class="btn">
      <el-button size="small" type="info" @click="resetForm('ruleForm')" round>戻る</el-button>
      <el-button size="small" type="primary" @click="submitForm('ruleForm')" round>保存</el-button>
    </el-row>

  </div>
</template>

<style>
.placeholder {
  margin-top: 8px;
}

h3 {
  color: #00ccff;
  margin-top: 30px;
  margin-left: 30px;
}

#container {
  height: 340px;
  width: 700px;
  background-color: rgb(220, 220, 220);
  border: 2px solid #05c4f4;
  margin-left: 30px;
}

.dot {
  color: red;
}

.bot {
  margin-top: 60px;
}

.in {
  width: 200px;
}

.word {
  padding-left: 25px;
}

.text {
  width: 350px;
}

.btn {
  margin-top: 10px;
  margin-left: 600px;
}
</style>

<script>
export default {
  data() {
    return {
      labelPosition: 'left',
      ruleForm: {
        authorityCode: '',
        authorityName: '',
        authorityFeature: ''
      },
      rules: {
        name: [
          { required: true, message: 'コードを入力してください', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '権限名称を入力してください', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '権限機能を入力してください', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      //发送ajax请求
      this.$http.put("/bff/authority/edit", this.ruleForm).then((res) => {
        console.log(this.ruleForm.authorityCode);
        console.log(this.ruleForm.authorityName);
        console.log(this.ruleForm.authorityFeature);
        console.log(res.data.statusCode);
        if (res.data.statusCode == 1) {
          this.dialogFormVisible4Edit = false;
          this.$message.success("修改成功");
        } else if (res.data.statusCode == 0) {
          this.$message.error("修改失败");
        }
      }).finally(() => {
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>